<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
    >
      <template slot="title">
        粉丝/关注
      </template>
    </van-nav-bar>
    <van-tabs v-model="index">
      <van-tab title="关注">
        <fans-list
          :active="index"
          :id="id"
        />
      </van-tab>
      <van-tab title="粉丝">
        <fans-list
          :active="index"
          :id="id"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import fansList from './components/fans-list'
export default {
  name: 'fans',
  props: {
    active: {
      type: [Number, String],
      required: true
    },
    id: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      index: parseInt(this.active)
    }
  },
  components: {
    fansList
  }
}
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar {
  .van-nav-bar__title {
    color: rgb(255, 255, 255) !important;
  }
  background: #3296fa;
  .van-icon {
    color: rgb(255, 255, 255) !important;
  }
}
/deep/ .van-tabs__nav {
  .van-tab__text {
    font-size: 32px;
    color: #3296fa !important;
  }
  .van-tab--active {
    font-weight: 700;
  }
  .van-tabs__line {
    bottom: 37.5px;
    width: 46px;
    height: 6px;
    background: #3296fa !important;
  }
}
</style>
